import React, { Component } from 'react'
import { NavLink, Route } from 'react-router-dom'
import User from './Admin/User'
import Goods from './Admin/Goods'
export default class Admin extends Component {
  render() {
    // 获取父级路由的前缀  如果父级路由变化 子路由不需要逐一修改
    const { path } = this.props.match
    return (
      <div style={{ display: 'flex' }}>
        <div style={{ width: '20%' }}>
          <div>后台管理系统</div>
          <ul>
            <li>
              <NavLink to={`${path}/user`}>用户管理</NavLink>
            </li>
            <li>
              <NavLink to={`${path}/goods`}>商品管理</NavLink>
            </li>
          </ul>
        </div>
        <div style={{ width: '80%' }}>
          <div>header头部</div>
          <div>
            {/* 嵌套路由渲染 */}
            <Route path={`${path}/user`} component={User}></Route>
            <Route path={`${path}/goods`} component={Goods}></Route>
          </div>
          <div>footer底部部分</div>
        </div>
      </div>
    )
  }
}
